<template>
  <div class="subpage certification-container">
      <div class="certification-top">
          <div class="certification-title-tips">
              <p>实名认证</p>
              <p>为有效保护您的资金安全，提升订单处理效率，请填写与您身份一致的信息，否则不会通过审核。</p>
          </div>
          <ul class="certification-input">
              <li>
                  <p>真实姓名</p>
                  <input type="text" placeholder="请输入您本人的真实姓名" v-model="name" maxlength="10">
              </li>
              <li>
                  <p>身份证号</p>
                  <van-field
                        size="large"
                        class="identity-card"
                        readonly
                        clickable
                        maxlength="18"
                        placeholder="请输入您本人的身份证号"
                        :value="identityCard"
                        @touchstart.native.stop="show = true"
                    />
              </li>
          </ul>
          <van-number-keyboard
            v-model="identityCard"
            :show="show"
            :maxlength="18"
            extra-key="X"
            close-button-text="完成"
            @blur="show = false"
        />
      </div>
      <div class="certification-botttom">
          <van-button round class="u-btn-default u-bg-gradient-light" @click="certificationFn">提交认证</van-button>
      </div>
  </div>
</template>

<script>
import { NumberKeyboard, Field } from 'vant';
export default {
    components:{
        [NumberKeyboard.name]:NumberKeyboard,
        [Field.name]:Field
    },
    data() {
        return {
            name: '',
            identityCard: '',
            show: false
        }
    },
    methods: {
        certificationFn() {
            if(!this.$tool.validator.isEmpty(this.name)){
                this.$tool.toast('请输入姓名')
                return;
            }
            if(!this.$tool.validator.isChinese(this.name)){
                this.$tool.toast('请输入正确的中文姓名')
                return;
            }
            if(!this.$tool.validator.isEmpty(this.identityCard)){
                this.$tool.toast('请输入身份证号码')
                return;
            }
            if(!this.$tool.validator.isIdentityCard(this.identityCard)){
                this.$tool.toast('请输入正确的身份证号码')
                return;
            }

            this.certificationAjax()
        },
        certificationAjax() {
            let postData = {
                username: this.name,
                idNum: this.identityCard,
            }
            this.$api.post('/api/user/certification', postData)
                .then((res) => {
                    this.$api.get('/api/user/detail?noLoading')
                        .then((res) => {
                            this.$store.commit("setUserInfo", res.data);
                        })
                    this.$tool.toast('实名认证成功', 800);
                    setTimeout(() => {
                        this.$router.back()
                    }, 1000);
                })
        }
    },
    mounted() {
        this.$tool.addEventListenerInputFocusout()
    }
}
</script>

<style lang="scss" scoped>
    .certification-container {
        .certification-top {
            width: 100%;
            padding: 40px 16px 0;
            box-sizing: border-box;
            background-color: #fff;
            .certification-title-tips {
                p:first-child {
                    margin-bottom: 24px;
                    font-size: 22px;
                    font-weight: 500;
                    color: #344047;
                }
                p:last-child {
                    margin-bottom: 40px;
                    line-height: 22px;
                    color: #5D6164;
                }
            }
            .certification-input {
                width: 100%;
                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    height: 60px;
                    font-size: 16px;
                    border-bottom: 1px solid #f2f2f2;
                    p {
                        color: #5D6164;
                    }
                    input {
                        width: 240px;
                        padding: 0;
                        font-size: 16px;
                        outline: none;
                        border: none;
                        border-radius: 0;
                        background-color: #fff;
                    }
                    .identity-card {
                        width: 240px;
                        height: 25px;
                        line-height: 25px;
                        font-size: 16px;
                        padding: 0;
                    }
                }
                li:last-child {
                    border-bottom: none;
                    p {
                        position: relative;
                        top: 3px;
                    }
                }
            }
        }
        .certification-botttom {
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            margin-top: 40px;
        }
    }
</style>

<style lang="scss">
    .certification-container {
        .van-number-keyboard__close {
            color: #31BC8D;
        }
    }
</style>